<template>
  <Card title="供需数据" :head-style="{ fontWeight: 'bold' }" style="margin-top: 20px;">
    <div v-if="data" class="count-box">
      <div>
        <span>浏览次数</span>
        <span>{{ data.browseNum }}</span>
      </div>
      <div>
        <span>浏览人数</span>
        <span>{{ data.browsePeopleNum }}</span>
      </div>
      <div>
        <span>收藏人数</span>
        <span>{{ data.collectPeopleNum }}</span>
      </div>
      <div>
        <span>合作意向数</span>
        <span>{{ data.cooperationNum }}</span>
      </div>
      <div>
        <span>合作成功数</span>
        <span>{{ data.cooperationSuccessNum }}</span>
      </div>
    </div>
  </Card>
</template>
<script setup lang="ts">
  import { getOpDataCount } from '@/api/institution/businessOpportunitiesManage';
  import { IOpDataCount } from '@/api/institution/model/businessOpportunitiesManageModel';
  import { Card } from 'ant-design-vue';
  import { ref, watch } from 'vue';
  const props = defineProps({
    id: {
      type: Number,
      default: undefined,
    },
  });

  const data = ref<IOpDataCount>();
  const queryOpDataCount = async () => {
    data.value = await getOpDataCount(props.id!);
    console.log(data.value);
  };

  watch(() => props.id, queryOpDataCount);
</script>

<style lang="less" scoped>
  .count-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 24px;
      &:first-child {
        margin-left: 0;
      }

      width: 200px;
      & > span:nth-child(1) {
        font-size: 14px;
        color: #4e5969;
      }
      & > span:nth-child(2) {
        font-size: 24px;
        color: #1d2129;
        margin-top: 8px;
      }
    }
  }
</style>
